<template>
  <div>
    <a-card>
      <a-form :form="form">
        <a-row >
          <a-col :md="20" :sm="24">
            <a-col :md="12" :sm="24">
              <a-form-item
                label="教职工编号"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input style="width:70%;" v-decorator="[
                  'jzgbh'
                ]"/>
                <a-button style="margin-left: 2%;width: 28%;" type="primary" @click="searchStaff">查询</a-button>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="导师是否在岗"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['dssfzg',
                  {
                    rules: [{ required: true, message: '请选择导师是否在岗!' }],
                  }]">
                  <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="导师编号"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input disabled v-decorator="['dsbh',
                  {
                    rules: [{ required: true, message: '请选择教职工!' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="姓名"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['xm',
                  {
                    rules: [{ required: true, message: '请输入导师姓名!' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="性别"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select allowClear v-decorator="['xbm',
                  {
                    rules: [{ required: true, message: '请选择性别!' }],
                  }]">
                  <a-select-option v-for="i in TYPE0011" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="出生日期"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-date-picker v-decorator="['csrq',
                  {
                    rules: [{ required: true, message: '请选择出生日期!' }],
                  }]" style="width: 100%" format="YYYY-MM-DD"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="导师类别"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select mode="multiple" allowClear v-decorator="['dslbm',
                  {
                    rules: [{ required: true, message: '请选择导师类别!' }],
                  }]">
                  <a-select-option v-for="i in TYPE0360" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="批准年月"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-month-picker v-decorator="['rdpzny']" style="width: 100%" format="YYYY-MM"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="身份证"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['sfzjh',
                  {
                    rules: [{ required: true, message: '请输入身份证' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="导师状态"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['dsztm',
                  {
                    rules: [{ required: true, message: '请选择导师状态' }],
                  }]">
                  <a-select-option v-for="i in TYPE0320" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="人事所属院系"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['dwh',
                  {
                    rules: [{ required: true, message: '请选择人事所属院系' }],
                  }]" showSearch :filterOption="filterOption">
                  <a-select-option v-for="i in selectMenu.yx" :key="i.id" :value="i.dwh">{{ i.dwh }} {{ i.dwmc }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="首次任博导年月"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-month-picker v-decorator="['scrbdny']" style="width: 100%" format="YYYY-MM"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="首次任硕导年月"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-month-picker v-decorator="['scrsdny']" style="width: 100%" format="YYYY-MM"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="毕业年月"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-month-picker v-decorator="['byny']" style="width: 100%" format="YYYY-MM"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="职称"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['zc',
                  {
                    rules: [{ required: true, message: '请选择职称' }],
                  }]">
                  <a-select-option v-for="i in TYPE0342" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="最后学历"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['zgxlm',
                  {
                    rules: [{ required: true, message: '请选择最后学历' }],
                  }]">
                  <a-select-option v-for="i in TYPE0018" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="最后学位"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select v-decorator="['zhxwm',
                  {
                    rules: [{ required: true, message: '请选择最后学位' }],
                  }]">
                  <a-select-option v-for="(i,index) in TYPE0023" :key="index" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="毕业院校或机构"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select style="width:50%" @change="handlePChange" placeholder="毕业学校所在省份" v-decorator="['byxxszsf']" allowClear>
                  <a-select-option v-for="i in selectMenu.province" :key="i.areaCode" :value="String(i.areaCode)">{{ i.name }}</a-select-option>
                </a-select>
                <a-select style="width:50%" v-decorator="['byxxdm']" allowClear>
                <a-select-option v-for="i in selectMenu.schoolList" :key="i.xxdm" :value="String(i.xxdm)">{{ i.xxmc }}</a-select-option>
              </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="电子邮箱"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['dzxx',
                  {
                    rules: [{ required: true, message: '请输入电子信箱' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="手机号码"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['lxdh',
                  {
                    rules: [{ required: true, message: '请输入手机号码' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="办公电话"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['bgdh',
                  {
                    rules: [{ required: true, message: '请输入办公电话' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="住宅电话"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['zzdh']"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="导师资助科研经费账号"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['dszzkyjfzh']"/>
              </a-form-item>
            </a-col>
            <!-- <a-col :md="18" :sm="24">
              <a-form-item
                label="导师资助科研经费账号"
                :labelCol="{span: 7,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['dszzkyjfzh']"/>
              </a-form-item>
            </a-col> -->
            <a-col :md="12" :sm="24">
              <a-form-item label="导师简介" 
                  :labelCol="{span: 8,offset: 1}"
                  :wrapperCol="{span: 14, offset: 1}">
                <a-input type="textarea" v-decorator="['dsjj']" :autosize="{ minRows: 4, maxRows: 6 }"/>
              </a-form-item>
            </a-col>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-item
              label=""
              :labelCol="{span: 0,offset: 1}"
              :wrapperCol="{span: 20, offset: 1}"
              selfUpdate
            >
              <a-upload
                name="avatar"
                style="width:120px;height:120px;"
                listType="picture-card"
                class="avatar-uploader"
                :showUploadList="false"
                :action="uploadUrl"
                list-type="picture"
                :headers="{
                  Authorization: $store.state.account.token
                }"
                @change="handleChange"
              >
                <img v-if="imageUrl" :src="imageUrl" style="width: 200px;height: 200px;" alt="avatar" />
                <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">上传照片</div>
                </div>
              </a-upload>
              <a-input v-decorator="['zpdz']" type="hidden"/>
            </a-form-item>
          </a-col>
          
        </a-row>
        
      </a-form>
    </a-card>

    <guide-major ref="guideMajor" :yx="selectMenu.yx"/>

    <div class="ant-pro-footer-toolbar">
      <a-button style="float: right;margin-top: 10px;" @click="creatTeacher" :loading="loadingBtn" type="primary">保存</a-button>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import moment from 'moment'
import guideMajor from './component/guideMajor'
import ACol from "ant-design-vue/es/grid/Col";
const selectArr = ['TYPE0320', 'TYPE0321', 'TYPE0011', 'TYPE0360', 'TYPE0342', 'TYPE0018', 'TYPE0023']
function getBase64 (img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
export default {
  data () {
    return {
      selectMenu: {},
      uploadUrl:`${process.env.SERVICE_URL}upload/img`,
      loading: false,
      imageUrl: '',
      loadingBtn: false,
      dsbh: '',
      zsnd: ''
    }
  },
  components: {ACol, guideMajor},
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  computed: {
    ...mapState({
      systemInfo: state => state.app.systemInfo,
      TYPE0321: state => state.app['TYPE0321'], // 是否在岗
      TYPE0011: state => state.app['TYPE0011'], // 性别
      TYPE0320: state => state.app['TYPE0320'], // 导师状态
      TYPE0360: state => state.app['TYPE0360'], // 导师类别
      TYPE0342: state => state.app['TYPE0342'], // 职称
      TYPE0018: state => state.app['TYPE0018'], // 学历
      TYPE0023: state => state.app['TYPE0023'] // 学位
    })
  },
  created () {
    selectArr.forEach(v => {
      this.$store.dispatch('app/setDictionary', v)
    })
    this.$store.dispatch('app/sysInfo').then(res => {
      this.zsnd = this.systemInfo.masterAdmissionYear
    })
    this.initSelectMenu()
  },
  methods: {
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll(),
        this.$api.base.areaList()
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          yx: res[0].data,
          province: res[1].data
        }
      })
    },
    searchStaff () {
      let bh = this.form.getFieldValue('jzgbh')
      this.dsbh = bh
      this.$api.teacher.teacherStaffInfo(bh).then(res => {
        if (res.data && res.data.rdpzny) {
          res.data.rdpzny = moment(res.data.rdpzny)
        }
        if (res.data && res.data.scrbdny) {
          res.data.scrbdny = moment(res.data.scrbdny)
        }
        if (res.data && res.data.scrsdny) {
          res.data.scrsdny = moment(res.data.scrsdny)
        }
        if (res.data && res.data.dslbm) {
          res.data.dslbm = res.data.dslbm.split(',')
        }
        // if (['rdpzny', 'scrbdny', 'scrsdny'].includes(key) && values[key]) {
        //   values[key] = values[key].format('YYYYMM')
        // }
        if (res.data.byxxszsf) {
          this.handlePChange(res.data.byxxszsf)
        }
        this.form.setFieldsValue(res.data)
        this.form.setFieldsValue({dsbh: res.data.gh})
        if (!res.data || !res.data.gh) {
          this.form.setFieldsValue({dsbh: bh})
        }
        console.log(res)
      }).catch(() => {
        console.log(1)
        this.form.resetFields()
        this.form.setFieldsValue({dsbh: bh})
      })
    },
    handleChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        let path = info.file.response.data[0]
        this.form.setFieldsValue({zpdz: path})
        this.imageUrl = `${process.env.IMG_URL}${path}`
      }
    },
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      if (!isJPG) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJPG && isLt2M
    },
    handlePChange(v) {
      this.form.setFieldsValue({byxxdm: ''})
      this.$api.base.schoolInfoQueryAll({xzqhsdm: v}).then(res => {
        this.$set(this.selectMenu, 'schoolList' , res.data)
      })
    },
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    setData (option, key) {
      this.form.setFieldsValue({[key]: option.data.attrs.name})
    },
    creatTeacher () {
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        try {
          this.loadingBtn = true
          for (const key in values) {
            if (['rdpzny', 'scrbdny', 'scrsdny'].includes(key) && values[key]) {
              values[key] = values[key].format('YYYYMM')
            }
          }
          this.$DateToString(values)
          console.log(values)
          values.dslbm = values.dslbm.join(',')
          values.dszdzyList = this.$refs.guideMajor.dszdzyList.map(item => {
            return {
              ...item
            }
          })
          values.dszdzyList.forEach(zy => {
            delete zy.researchList
            zy.dsyjfxList = zy.dsyjfxList && zy.dsyjfxList.map(item => {
              return {
                yjfxm: item
              }
            })
          })
          this.$message.loading('保存中', 0)
          this.$api.teacher.addTeacher(values).then(res => {
            this.$message.success(res.msg, 4)
          }).finally(() => {
            setTimeout(() => {
              this.$message.destroy()
            }, 4000);
            this.loadingBtn = false
            // this.form.resetFields()
          })
        } catch (error) {
          console.log(error)
        }
      })
    }
  }
}
</script>
